<template>
    <div class="process-container">
        <div class="page-one" :class="startTranslate?'page-one-translate':''">
            <div class="page-one-img"><img :src="itemStart.picture||'/static/h5img/process1.png'" alt=""></div>
            <div class="page-one-text">{{itemStart.copywriter}}</div>
            <div class="page-one-open" @click="startProcess">开启心路旅程</div>
        </div>
        <div class="translate-container" :class="startTranslate?'van-swipe-translate':''">
            <van-swipe :touchable="true" vertical :show-indicators='false' :loop='false' class="process-swipe" ref='processSwipe' @change='swipeChange' >
                <van-swipe-item>
                    <div class="process-swipe-item page-two" :class="currentIndex == 0?'animationClass':''">
                        <div class="page-top-icon"><img src="/static/h5img/process8.png" alt=""></div>
                        <div class="page-two-hint">一直往上滑，查看心路旅程</div>
                        <div class="page-two-text">{{itemTwo.copywriter}}</div>
                        <div class="page-two-img"><img :src="itemTwo.picture||'/static/h5img/process4.png'" alt=""></div>
                    </div>
                </van-swipe-item>
                <van-swipe-item>
                    <div class="process-swipe-item page-three" :class="currentIndex == 1?'animationClass':''">
                        <div class="page-three-text" v-html="itemThree.copywriter||''"></div>
                        <div class="page-three-img"><img :src="itemThree.picture||'/static/h5img/process5.png'" alt=""></div>
                    <div class="icon-warpper"><div class="page-bottom-icon"><img src="/static/h5img/process8.png" alt=""></div></div>
                    </div>
                </van-swipe-item>
                <van-swipe-item>
                    <div class="process-swipe-item page-four" :class="currentIndex == 2?'animationClass':''">
                        <div class="page-four-text" v-html="itemFour.copywriter||''"></div>
                        <div class="page-four-img"><img :src="itemFour.picture||'/static/h5img/process6.png'" alt=""></div>
                        <div class="icon-warpper"><div class="page-bottom-icon"><img src="/static/h5img/process8.png" alt=""></div></div>
                    </div>
                </van-swipe-item>
                <van-swipe-item>
                    <div class="process-swipe-item page-five" :class="currentIndex == 3?'animationClass':''">
                        <div class="page-five-text" v-html="itemFive.copywriter||''"></div>
                        <div class="page-five-swipe" v-if="itemFive.classMienList">
                            <van-swipe @change="eventChange" :touchable="true">
                                <van-swipe-item v-for="(item,key) in itemFive.classMienList" :key="key+'classMienList'"><img :src="item.filename" alt=""></van-swipe-item>
                              

                                <div class="page-five-indicator" slot="indicator">
                                    <span>{{ currentEvent + 1 }} &frasl; {{itemFive.classMienList.length}}</span> <span>{{itemFive.classMienList[currentEvent].class_name}}</span>
                                </div>
                            </van-swipe>
                        </div>
                        <div class="page-five-null" v-if="!itemFive.classMienList">
                            <img src="/static/h5img/process3.png" alt="">
                            <div class="five-null-text">暂时没有相关风采照</div>
                        </div>
                        <div class="icon-warpper"><div class="page-bottom-icon"><img src="/static/h5img/process8.png" alt=""></div></div>
                    </div>
                </van-swipe-item>
                <van-swipe-item v-for="(item,key) in itemEvent" :key="key+'itemEvent'">
                    <div class="process-swipe-item page-four" :class="currentIndex == (4+key)?'animationClass':''">
                        <div class="page-four-text" v-html="item.copywriter||''"></div>
                        <div class="page-four-img"><img :src="item.picture||'/static/h5img/process6.png'" alt=""></div>
                        <div class="icon-warpper"><div class="page-bottom-icon"><img src="/static/h5img/process8.png" alt=""></div></div>
                    </div>
                </van-swipe-item>
                <van-swipe-item>
                    <div class="process-swipe-item page-six" :class="currentIndex == (this.listAll.length-2)?'animationClass':''">
                        <div class="page-six-img"><img :src="itemEnd.picture||'/static/h5img/process2.png'" alt=""></div>
                        <div class="page-six-text" v-html="itemEnd.copywriter||''"></div>
                        <div class="page-six-btn" @click="backTop(0)">返回顶部</div>
                        <div class="page-six-share-img"><img @click='shareFriend(true)' src="/static/h5img/process7.png" alt=""></div>
                        <div class="page-six-share-text"><span @click='shareFriend(true)'>分享到朋友圈</span> </div>
                    </div>
                </van-swipe-item>
            </van-swipe>
        </div>
        <div class="share-modal" ref='modal' @touchmove='touchmoveDisable' v-show="showShare">
            <!-- <canvas id="shareCanvas" width='750' height='1334' style="background: #fff;">
                Your browser does not support the canvas element.
            </canvas> -->
            
            <div class="share-content">
                <div class="share-title flex-row">
                    <div class="title-text">分享至朋友圈</div>
                    <div class="title-close flex-row" @click='shareFriend(false)'><img src="/static/h5img/guanbi.png" alt=""></div>
                </div>
                <div class="share-img">
                    <img :src="canvasImg" alt="">
                </div>
                <div class="share-save">长按图片保存到手机后，您可到朋友圈分享该图片</div>
            </div>
        </div>
        <div class="share-html" id='shareHtml'>
            <div class="share-html-img">
                <img src="/static/h5img/share.png" alt="">
            </div>
            <div class="share-html-text">毕业啦！</div>
            <p class="share-html-date" v-html="itemThree.copywriter||''"></p>
            <p class="share-html-got" v-html="itemFour.copywriter||''"></p>
            <div class="share-html-icon flex-row">
                <div class="share-icon"><img :src="wxACode" alt=""></div>
                <div class="share-html-more">
                    <div class="share-html-small">国科学院小程序</div>
                    <div class="share-html-more-text">长按识别小程序码查看更多信息</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import html2canvas from 'html2canvas'
import {getProcess, getWXACodeUnlimit} from 'api/getData'
import Base64 from 'plus/Base64'
// var Base64={_keyStr:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",encode:function(e){var t="";var n,r,i,s,o,u,a;var f=0;e=Base64._utf8_encode(e);while(f<e.length){n=e.charCodeAt(f++);r=e.charCodeAt(f++);i=e.charCodeAt(f++);s=n>>2;o=(n&3)<<4|r>>4;u=(r&15)<<2|i>>6;a=i&63;if(isNaN(r)){u=a=64}else if(isNaN(i)){a=64}t=t+this._keyStr.charAt(s)+this._keyStr.charAt(o)+this._keyStr.charAt(u)+this._keyStr.charAt(a)}return t},decode:function(e){var t="";var n,r,i;var s,o,u,a;var f=0;e=e.replace(/[^A-Za-z0-9+/=]/g,"");while(f<e.length){s=this._keyStr.indexOf(e.charAt(f++));o=this._keyStr.indexOf(e.charAt(f++));u=this._keyStr.indexOf(e.charAt(f++));a=this._keyStr.indexOf(e.charAt(f++));n=s<<2|o>>4;r=(o&15)<<4|u>>2;i=(u&3)<<6|a;t=t+String.fromCharCode(n);if(u!=64){t=t+String.fromCharCode(r)}if(a!=64){t=t+String.fromCharCode(i)}}t=Base64._utf8_decode(t);return t},_utf8_encode:function(e){e=e.replace(/rn/g,"n");var t="";for(var n=0;n<e.length;n++){var r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r)}else if(r>127&&r<2048){t+=String.fromCharCode(r>>6|192);t+=String.fromCharCode(r&63|128)}else{t+=String.fromCharCode(r>>12|224);t+=String.fromCharCode(r>>6&63|128);t+=String.fromCharCode(r&63|128)}}return t},_utf8_decode:function(e){var t="";var n=0;var r=c1=c2=0;while(n<e.length){r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r);n++}else if(r>191&&r<224){c2=e.charCodeAt(n+1);t+=String.fromCharCode((r&31)<<6|c2&63);n+=2}else{c2=e.charCodeAt(n+1);c3=e.charCodeAt(n+2);t+=String.fromCharCode((r&15)<<12|(c2&63)<<6|c3&63);n+=3}}return t}}

export default {
    data(){
        return {
            listAll:[],
            itemStart: [],
            itemEnd: [],
            itemEvent: [],
            itemTwo: {},
            itemThree: {},
            itemFour: {},
            itemFive: {},
            startTranslate: false,
            showShare:false,
            currentIndex: null,
            canvasImg:'',
            currentEvent:0,
            stuId:'',
            wxACode:''
        }
    },
    created(){
        
        
    },
    mounted(){
        this.stuId = this.$route.query.stuId
        if(this.stuId){
            getProcess(this.stuId).then(res=>{
                console.log(res)
                if(res.list){
                    this.listAll = res.list.slice();
                    this.itemEnd = res.list.pop();
                    this.itemStart = res.list[0];
                    this.itemTwo = res.list[1];
                    this.itemThree = res.list[2];
                    this.itemFour = res.list[3];
                    this.itemFive = res.list[4];
                    this.itemEvent = res.list.slice(5)
                    // console.log(this.itemEnd)
                    // console.log(this.itemStart)
                    // console.log(this.itemEvent)
                }
            })
            getWXACodeUnlimit('pages/H5process/H5process',this.stuId).then(res=>{
                if(res){
                    let base64String =  Base64(res);
                    this.wxACode = base64String
                    this.$nextTick(()=>{
                        let that=this
                        html2canvas(document.getElementById('shareHtml'),{backgroundColor: '#fff'}).then(function(canvas){
                            let image = new Image();
                            image.src = canvas.toDataURL("image/png");
                            that.canvasImg=image.src
                            return;
                        })
                    })
                }
            })
        }
    },
    methods:{
        eventChange(index) {
        this.currentEvent = index;
        },
        createCanvas(){
            var c=document.getElementById("shareCanvas");
            var ctx=c.getContext("2d");console.log(ctx)
            var img=new Image();
            img.src="/static/h5img/share.png";
            img.style.width='750px';
            img.style.height='495px';
            // console.log(img)
            img.onload = function(){
                ctx.drawImage(img,0,0);
            }
            // ctx.drawImage(img,0,0);
            ctx.font="62px bold SourceHanSansCN-Bold";
            ctx.fillStyle = "rgba(30,30,30,1)";
            ctx.fillText("毕业啦！",30,555);

            ctx.font="24px SourceHanSansCN-Regular";
            ctx.fillStyle = "rgba(30,30,30,1)";
            var firstText = "2018年4月2日与我初次见面";
            ctx.fillText(firstText,30,657);
            console.log(ctx.measureText(firstText[0]).width)
        },
        touchmoveDisable(e){
            event.preventDefault()
        },
        backTop(num){
            
            this.$refs['processSwipe'].swipeTo(num)
            
        },
        swipeChange(index){
            this.currentIndex = index
        },
        shareFriend(bool){
            this.showShare = bool
        },
        startProcess(){
            this.startTranslate = true
            setTimeout(()=>{
                this.currentIndex = 0
            },200)
            
        }
    }
}

</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~style/base.styl';
@keyframes iconmove
{
    0%   {transform: translateY(0);}
    50%  {transform: translateY(2rem);}
    100% {transform: translateY(0);}
}

@-webkit-keyframes iconmove /* Safari 与 Chrome */
{
    0%   {transform: translateY(0);}
    50%  {transform: translateY(2rem);}
    100% {transform: translateY(0);}
}
#shareCanvas{
    width:37.5rem;
    height:66.7rem;
}
.process-container{
    width:100%;
    height:100vh; 
    overflow: hidden;
    box-sizing:border-box;
    position: relative;
}
.process-swipe{
    width:100vw;
    height:100vh;
}
.translate-container{
    transition: all .5s;
    position: absolute;
    left: 100vw;

}
.van-swipe-translate{
    left: 0;

}
.process-swipe-item{
    background: #fff;
    height: 100%;
    opacity: 0;
    transition: all 1.5s;
    transform: translateY(30%);
    box-sizing:border-box;
    position: relative;
    
}
.page-top-icon{
    margin-top:8rem;
    animation: iconmove 1.2s infinite;
    -webkit-animation: iconmove 1.2s infinite; /* Safari 与 Chrome */
    img{
        width:3rem;
        height:3.6rem;
        display: block;
        margin: 0 auto;
    }
}
.icon-warpper{
    width: 100%;
    position: absolute;
    bottom: 4rem;
}
.page-bottom-icon{
    width: 100%;
    animation: iconmove 1.2s infinite;
    -webkit-animation: iconmove 1.2s infinite; /* Safari 与 Chrome */
    img{
        width:3rem;
        height:3.6rem;
        display: block;
        margin: 0 auto;  
    }
}
.page-one{
    width:100vw;
    height:100vh;
    background: #fff;
    box-sizing:border-box;
    position: absolute;
    left: 0;
    .page-one-img{
        text-align:center;
        margin-top:9rem;
        
        img{
            width:38rem;
            height:27.2rem;
        }
    }
    .page-one-text{
        width:52.6rem;
        height:16rem;
        font-size:3.6rem;
        font-family:SourceHanSansCN-Regular;
        font-weight:400;
        color:rgba(30,30,30,1);
        line-height:8rem;
        margin: 0 auto;
        text-align:center;
        margin-top:7.8rem;
    }
    .page-one-open{
        margin: 0 auto;
        width:40.5rem;
        height:8.2rem;
        line-height: 8.2rem;
        border: 0.2rem solid rgba(255,36,13,1);
        border-radius:4rem;
        text-align:center;
        font-size:3.2rem;
        font-family:SourceHanSansCN-Regular;
        font-weight:400;
        margin-top:5.8rem;
        color:rgba(255,36,13,1);
    }

}
.page-one-translate{
    transition: all .5s;
    left: -100vw;
}
.page-two{
    opacity: 1;
    .page-two-hint{
        text-align:center;
        margin-top:3rem;
        font-size:2.6rem;
        font-family:SourceHanSansCN-Regular;
        font-weight:400;
        color:rgba(164,164,164,1);
    }
    .page-two-text{
        text-align:center;
        margin:10rem 0;
        font-size:3.6rem;
        font-family:SourceHanSansCN-Regular;
        font-weight:400;
        color:rgba(30,30,30,1);
    }
    .page-two-img{
        text-align:center;
        animation: iconmove 1.5s infinite;
        -webkit-animation: iconmove 1.5s infinite; /* Safari 与 Chrome */
        img{
            width:44rem;
            height:49.8rem;
        }
    }
}
.page-three{
    .page-three-text{
        text-align:center;
        font-size:3.6rem;
        font-family:SourceHanSansCN-Regular;
        font-weight:400;
        color:rgba(30,30,30,1);
        line-height:8rem;
        padding-top:5.8rem;
    }
    .page-three-img{
        margin-top:13.8rem;
        text-align:center;
        animation: iconmove 1.5s infinite;
        -webkit-animation: iconmove 1.5s infinite; /* Safari 与 Chrome */
        img{
            width:43.9rem;
            height:44.5rem;
        }
    }
}
.page-four{
    .page-four-text{
        margin: 0 auto;
        text-align:center;
        width:62.9rem;
        font-size:3.6rem;
        font-family:SourceHanSansCN-Regular;
        font-weight:400;
        color:rgba(30,30,30,1);
        line-height:8rem;
        padding-top:5.8rem;
    }
    .page-four-img{
        margin-top:15.8rem;
        text-align:center;
        animation: iconmove 1.5s infinite;
        -webkit-animation: iconmove 1.5s infinite; /* Safari 与 Chrome */
        img{
            width:40.5rem;
            height:50.1rem;
        }
    }
}
.page-five{
    .page-five-text{
        box-sizing:border-box;
        margin: 0 auto;
        text-align:center;
        width:68.2rem;
        font-size:3.6rem;
        font-family:SourceHanSansCN-Regular;
        font-weight:400;
        color:rgba(30,30,30,1);
        line-height:8rem;
        padding-top:5.8rem;
    }
    .page-five-null{
        text-align:center;
        margin-top:12.8rem;
        img{
            width:12rem;
            height:22.1rem;
        }
        .five-null-text{
            margin-top:3rem;
            font-size:2.6rem;
            font-family:SourceHanSansCN-Regular;
            font-weight:400;
            color:rgba(164,164,164,1);
        }
    }
}
.page-six{
    .page-six-img{
        text-align:center;
        margin-top:13rem;
        margin-bottom:11.8rem;
        img{
            width:20.8rem;
            height:20.8rem;
        }  
    }
    .page-six-text{
        text-align:center;
        width:39.3rem;
        height:16rem;
        font-size:3.6rem;
        font-family:SourceHanSansCN-Regular;
        font-weight:400;
        color:rgba(30,30,30,1);
        line-height:8rem;
        margin:0 auto;

    }
    .page-six-btn{
        margin:0 auto;
        margin-top:5.8rem;
        margin-bottom:9rem;
        text-align:center;
        width:40.5rem;
        height:8.2rem;
        line-height:8.2rem;
        border:0.2rem solid rgba(255,36,13,1);
        border-radius:4rem;
        font-size:3.2rem;
        font-family:SourceHanSansCN-Regular;
        font-weight:400;
        color:rgba(255,36,13,1);
    }
    .page-six-share-img{
       text-align:center;
       margin-bottom:3rem;
        img{
            width:7.8rem;
            height:7.8rem;
        }   
    }
    .page-six-share-text{
        text-align:center;
        font-size:2.6rem;
        font-family:SourceHanSansCN-Regular;
        font-weight:400;
        color:rgba(164,164,164,1);
    }
}
.animationClass{
    opacity: 1;
    transform: translateY(0);
}
.share-modal{
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 100;
    overflow: hidden;
    background:rgba(0, 0, 0, 0.6)
    top: 0;
    box-sizing: border-box;
}
.share-content{
    position: absolute;
    z-index: 100;
    width:100%;
    min-height:100rem;
    bottom:0;
    background:rgba(255,255,255,1);
}
.share-title{
    height:11.6rem;
    justify-content: space-between;
    align-items:center;
    font-size:3.6rem;
    font-family:SourceHanSansCN-Bold;
    font-weight:bold;
    color:rgba(30,30,30,1);
    border-bottom: 0.1rem solid rgba(238,238,238,1);
    .title-text{
        padding-left: 3rem;
    }
    .title-close{
        height: 100%;
        padding: 0 3rem;
        align-items:center;
        img{
            width:1.8rem;
            height:1.8rem;
        }
        
    }
}
.share-img{
    width:37.5rem;
    height:66.7rem;
    margin: 4rem auto;
    box-shadow:0rem 0.5rem 2rem 0.5rem rgba(0,0,0,0.08);
    img{
        width:100%;
        height:100%;
    }
}
.share-save{
    height:2.6rem;
    font-size:2.6rem;
    font-family:SourceHanSansCN-Regular;
    font-weight:400;
    color:rgba(164,164,164,1);
    line-height:2.6rem;
    text-align:center;
}
.share-html{
    width:750px;
    height:1334px;
    background:rgba(255,255,255,1);
    position: absolute;
    
    z-index: -1;
    left:10000px;
    p{
        font-size:24px;
        font-family:SourceHanSansCN-Regular;
        font-weight:400;
        color:rgba(30,30,30,1);
        line-height:44px;
        padding:0 30px;
    }
}
.share-html-img{
    img{
        width:750px;
        height:495px;
    }
}
.share-html-text{
    font-size:62px;
    font-family:SourceHanSansCN-Bold;
    font-weight:bold;
    color:rgba(30,30,30,1);
    margin-top:60px;
    padding-left:30px;
}
.share-html-date{
    margin-top:40px;
}
.share-html-got{
    margin-top:40px;
}
.share-html-icon{
    padding-left:30px;
    margin-top:120px;
    .share-icon{
        img{
            width:208px;
            height:208px;
        }
    }
}
.share-html-more{
    padding-top:65px;
    padding-left:30px;
    .share-html-small{
        font-size:32px;
        font-family:SourceHanSansCN-Bold;
        font-weight:bold;
        color:rgba(30,30,30,1);
        margin-bottom:20px;
    }
    .share-html-more-text{
        font-size:26px;
        font-family:SourceHanSansCN-Regular;
        font-weight:400;
        color:rgba(164,164,164,1);
    }
}
.page-five-swipe{
    width: 70rem;
    margin: 0 auto;
    img{
        width:100%;
        height:40rem;
        border-radius:1rem;
    }
    .page-five-indicator{
       
        font-size:2.8rem;
        font-family:SourceHanSansCN-Regular;
        font-weight:400;
        color:rgba(164,164,164,1);
        
        span{

            display:inline-block;
            padding-top:3rem;
        }
        
    }
}
</style>